<template>
  <el-row :gutter="10">
    <el-col :xs="24" :sm="12" :md="6">
      <CommonCard title="今日销售额" value="303,467,999">
        <template #default>
          <div class="default-slot">
            <span> 日同比 -19.16%</span>&nbsp;
            <el-icon color="red"><CaretBottom /></el-icon>
          </div>
          <div class="default-slot">
            <span>日同比 56.67% </span> &nbsp;<el-icon color="green"
              ><CaretTop
            /></el-icon>
          </div>
        </template>
        <template #footer>
          <div class="footer-slot">昨日销售额 ￥360,000,000</div>
        </template>
      </CommonCard>
    </el-col>

    <el-col :xs="24" :sm="12" :md="6">
      <CommonCard title="今日订单" value="303,467,999">
        <template #default> <LineECharts /> </template>
        <template #footer>
          <div class="footer-slot">昨日订单量 ￥30,000,000</div>
        </template>
      </CommonCard>
    </el-col>
    <el-col :xs="24" :sm="12" :md="6">
      <CommonCard title="今日交易用户数" value="182,435">
        <template #default> <BarChart /> </template>
        <template #footer>
          <div class="footer-slot">退货率 5.91%</div>
        </template>
      </CommonCard>
    </el-col>
    <el-col :xs="24" :sm="12" :md="6">
      <CommonCard title="累计用户数" value="182,435">
        <template #default> <SingleBarChart /> </template>
        <template #footer>
          <div class="footer-slot">退货率 5.91%</div>
        </template>
      </CommonCard>
    </el-col>
  </el-row>
</template>

<script lang="ts">
export default {
  name: 'HomeTop',
}
</script>

<script lang="ts" setup>
import { CaretBottom, CaretTop } from '@element-plus/icons-vue'
import CommonCard from './CommonCard.vue'
import LineECharts from './LineEchart.vue'
import BarChart from './BarChart.vue'
import SingleBarChart from './SingleBarChart.vue'
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  padding: 20px;
  font-size: 30px;
}
.default-slot {
  font-size: 12px;
  font-weight: 600;
  color: #666;
  line-height: 22px;
  display: flex;
  align-items: center;
}
.footer-slot {
  margin-top: 15px;
  font-size: 12px;
  font-weight: 600;
  color: #666;
}
</style>
